<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		html {
			font-size: 30px;
		}
		#p01 {
			/*font-size: */
		}
		#p02 {
			color: blue;
		}
		#p03 {
			font-family: Arial;
		}
	</style>
	<body>
		<h2>
			文本大小
		</h2>
		<p id="p01">
			默认的字体大小是16PX
		</p>
		<p style="font-size: 1.5em;">
			这里的字体大小为1em
			<span style="font-size: 1.5em;">
				em单位的特点是，根据父元素字体大小进行计算，当前字体为1.5em
				<span>
					这里再写1.5em
				</span>
			</span>
		</p>
		
		<h2>
			文本颜色
		</h2>
		<p id="p02">
			字体颜色color:blue
		</p>
		<h2>
			文本字体
		</h2>
		<p id="p03">
			这个字体改为Arial
		</p>
		<p>
			这个字体改为Arial
		</p>
		
		<p style="font-size: 1.5rem;">
			这里的字体大小是1.5rem
			<span style="font-size: 2rem;">
				这里字体大小是2rem
			</span>
		</p>
		
		<p style="color: rgb(200,150,120)">
			字体的颜色除了可以用#333，#FF3333 十六进制表示，还可以使用rgb(200,150,120)
		</p>
		
		<p style="font-weight: bold;">
			字体加粗 font-weight: bold;
			<b>aaa</b> 
			<strong>aaa</strong>
		</p>
		
		
		<p style="text-transform: capitalize;">
			abcdefdsafaaaaaaaaaaaaaaaaas首字母变大写 text-transform: capitalize
		</p>
		<p style="text-transform: uppercase;">
			abcdefdsafaaaaaaaaaaaaaaaaas text-tansform: uppercase； 所有字母大写
		</p>
		
		<p style="">
			文字默认是左对齐的 text-align:left
		</p>
		<p style="text-align: center;">
			文字居中 text-align:center
		</p>
		
		 
		<span style="width: 800px; height: 200px; background: #4B4B4B; display: block; line-height: 150px;">
			grouggg
			<img src="img/qianfenglogo.png" style="vertical-align: middle;" >
			
		</span>
		<div id="" style="width:600px; height: 300px; background: #008000; text-align: center;">
			<div style="display: inline-block;  width:100px; height: 100px; background: gray; "></div>
			和莪顶顶顶顶
		</div>
		
		<div id="" style="width:300px; height: 300px; background: #008000; text-align: center; line-height: 300px;">
			和莪顶顶顶顶
		</div>
		
		<div>
			<a href="">默认的超链接有下划线</a>
		</div>
		<div>
			<a style="text-decoration: none;" href="">默认的超链接有下划线</a>
		</div>
		<div>
			<a style="text-decoration: line-through;" href="">默认的超链接有下划线</a>
		</div>
		<div>
			<a style="text-decoration: overline;" href="">默认的超链接有下划线</a>
		</div>
		
		<p style="text-indent: 2em; letter-spacing:1em;">
			首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进
		</p>
		<p style="text-indent: 2em; letter-spacing:1em; word-spacing: 20px;">
			hello good good study day day up hello good good study day day up hello good good study day day up hello good good study day day up
		</p>
		
		<div id="" style="layout-flow: vertical-ideographic; width:300px; height: 300px; background: #008000; text-align: center; line-height: 300px;">
			和莪顶顶顶顶ds顶顶顶ds顶顶顶ds顶顶顶ds顶顶顶ds顶顶顶ds
		</div>
		
		<p style="font: italic bold 20px/1.2 microsoft yahei;">adlfkjalsdfasdf</p>
		
	
	</body>
</html>